<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link rel="stylesheet" href="animate.css">-->
    <style>
        *{
            margin: 0;
            padding: 0;
        }
            div>p{
                font-family: 楷体;
                font-size: 50px;
               position: absolute;
                left: 345px;
                top: 170px;
                color: rebeccapurple;
            }
        div{
            width: 100%;
            height: 630px;
            background: url("img/q2.png") no-repeat;
            background-size: 100% 100%;
            position: relative;
            overflow: hidden;
        }
        div>span{
            width: 100px;
            height: 100px;
            display: inline-block;
            position: absolute;
            animation: name1 3s linear infinite alternate;
        }
        @keyframes name1 {
            0%{
                transform: rotate(2deg);
                transform-origin: center 0;
            }
            20%{
                transform: rotate(15deg);
                transform-origin: center 0;
            }
            40%{
                transform: rotate(2deg);
                transform-origin: center 0;
            }
            60%{
                transform: rotate(-2deg);
                transform-origin: center 0;
            }
            80%{
                transform: rotate(-15deg);
            }
            100%{
                transform: rotate(0deg);
                transform-origin: center 0;
            }
        }
        div>span:nth-of-type(1) {
            left: 246px;
            top: 373px;
        }
        div>span:nth-of-type(2){
            left: 363px;
            top: 355px;
        }
        div>span:nth-of-type(3){
            left: 710px;
            top: 472px;
        }
        div>span:nth-of-type(4){
            left: 587px;
            top: 274px;
        }
        div>span:nth-of-type(5){
            left: 733px;
            top: 305px;
        }
        div>span:nth-of-type(6){
            left: 528px;
            top: 431px;
        }
        div>span>img{
           width: 100%;
            height: 100%;
        }
        @keyframes nameq{
            100%{
                transform: translateY(1000px);
            }
        }
    </style>
</head>
<body>
    <div>
        <p>摇晃的桃子</p>
        <span><img src="img/未标题-1.png" alt=""></span>
        <span><img src="img/未标题-1.png" alt=""></span>
        <span><img src="img/未标题-1.png" alt=""></span>
        <span><img src="img/未标题-1.png" alt=""></span>
        <span><img src="img/未标题-1.png" alt=""></span>
        <span><img src="img/未标题-1.png" alt=""></span>
    </div>
    <script>
        var span=document.getElementsByTagName("span");
        for(var i=0;i<span.length;i++){
            span[i].onclick=function(){
//               this.style.top="1000px";
                this.style.animation="nameq 4s 1 both"
        }
        }
    </script>
</body>
</html>